<template>
    <el-scrollbar height="125px">
        <div :id="id">

        </div>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import {onMounted, onUpdated} from "vue";
import Vditor from 'vditor'
import 'vditor/dist/index.css';

const props = defineProps(['content', "noteId"])
const id = 'noteId-' + props.noteId

async function md2html(md: string) {
    document.getElementById(id)!.innerHTML = await Vditor.md2html(props.content,
        {
            mode: "light",
            cdn: "https://unpkg.com/vditor@3.10.3",
            anchor: 1,
        })
}

onMounted(async () => {
    md2html(props.content)
})
onUpdated(async () => {
    md2html(props.content)
})
</script>

<style scoped>
.note-preview {
    height: 120px;
}
</style>